<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
    <title>Jquery层级选择器</title>
    <style type="text/css">
        .selected {
            background-color: gray;
        }
    </style>
</head>
<body>
<ul id="myul">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
    </li>
</ul>

<label>Lable1</label><input type="text" value="文本一"/><input type="text" value="文本二"/>
<label>Lable2</label><input type="text" value="文本三"/><input type="text" value="文本四"/>
<label>Lable3<input type="text" value="文本四"/><input type="text" value="文本五"/></label>


<div class="question">
    <div>问题一：选择ul下的所有li元素，并分析选择结果；</div>
    <div>问题二：选择myul下的所有li元素，并分析选择结果；</div>
    <div>问题三：选择所有label元素后的input元素，并分析选择结果；</div>
    <div>问题四：选择紧跟着label元素的input元素，并分析选择结果；</div>
</div>

<hr>
<h3>答案</h3>
<div id="answer">

    <div id="q1">问题一:$("ul li")</div>
    <div id="q2">
        问题二:
        <p>$("#myul li")这是获取myul元素下所有li元素;</p>
        <p>$("#myul > li")是获取myul元素下直属的li元素</p>
    </div>
    <div id="q3">
        问题三:
        $("label ~ input").css("background-color","red")
    </div>
    <div id="q4">
        问题四:
        $("label + input").css("background-color","blue")
    </div>
Í
</div>
</body>
</html>